<template>
  <div class="personal">
    <div class="content">
      <div class="top">
        <div class="img-box">
          <img src="@/assets/img/头像.png" alt="" srcset="">
        </div>
        <div class="user">
          <p class="name">
            <span class="m-r">{{ userAuth.userRealName }}</span>
            <el-tag>{{userAuth.roleName}}</el-tag>
          </p>
          <!-- <p class="text">简介：1980年10月12日出生于北京市。2000年毕业于北京师范大学化学系。早期从事理论有机化学和有机合成化学的研究,曾对射干、玉米须等中草药有效成分的提取、分离、结构测定和全合成,以及对金霉素等抗生素的合成进行了研究…</p> -->
        </div>
      </div>
      <div class="card m-t">
        <el-radio-group v-model="radioName">
          <el-radio-button label="我的账号"></el-radio-button>
          <el-radio-button label="我的收藏"></el-radio-button>
          <el-radio-button label="我的下载"></el-radio-button>
          <el-radio-button label="我的咨询"></el-radio-button>
          <el-radio-button label="我的预约"></el-radio-button>
          <el-radio-button label="我的服务"></el-radio-button>
          <el-radio-button label="我的建议"></el-radio-button>
        </el-radio-group>
        <div v-if="radioName=='我的账号'">
          <InfoComp />
        </div>
        <div v-if="radioName=='我的收藏'">
          <MyCollect />
        </div>
        <div v-if="radioName=='我的下载'">
          <MyDownload />
        </div>
        <div v-if="radioName=='我的咨询'">
          <MyConsult />
        </div>
        <div v-if="radioName=='我的预约'">
          <MyMake />
        </div>
        <div v-if="radioName=='我的服务'">
          <MyService />
        </div>
        <div v-if="radioName=='我的建议'">
          <MyAdvice />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import InfoComp from './common/info.vue'
import MyCollect from './common/myCollect.vue'
import MyDownload from './common/myDownload.vue'
import MyAdvice from './common/myAdvice.vue'
import MyConsult from './common/myConsult.vue'
import MyMake from './common/myMake.vue'
import MyService from './common/MyService.vue'
export default {
  components: { InfoComp, MyCollect, MyDownload, MyAdvice, MyConsult, MyMake, MyService },
  data() {
    return {
      radioName: '我的账号',
      userAuth: localStorage.getItem('userInfo')
        ? JSON.parse(localStorage.getItem('userInfo'))[0]
        : {
          "userId": 1299,
          "userName": "admin",
          "userRealName": "管理员",
          "userEmail": null,
          "deptName": null,
          "createBy": "admin",
          "createTime": "2024-01-02 21:39:11",
          "departmentName": "",
          "departmentId": null,
          "selectFlag": true,
          "userHeadPath": null,
          "userPhone": 18702348729,
          "enableFlag": "y",
          "roleName": "平台管理员"
        },
    }
  },
  methods: {}
}
</script>

<style lang="less" scoped>
  .personal {
    background: url('~@/assets/img/用户中心.png') no-repeat;
    background-size: cover;
    padding: 30px 0 60px;
    .content {
      background: #ffffff;
      border-radius: 4px;
      width: 63%;
      margin: 0 auto;
      padding: 30px 20px;
      .top {
        display: flex;
        align-items: center;
        .img-box {
          width: 80px;
          height: 80px;
          margin-right: 20px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .user {
          flex: 1;
          .name {
            font-family: PingFang-SC, PingFang-SC;
            font-weight: bold;
            font-size: 24px;
            color: #333333;
            line-height: 33px;
            text-align: left;
            font-style: normal;
            display: flex;
            align-items: center;
          }
          .text {
            font-family: PingFang-SC, PingFang-SC;
            font-weight: 500;
            font-size: 18px;
            color: #333333;
            line-height: 25px;
            text-align: left;
            font-style: normal;
          }
        }
      }
      .card {
        padding-bottom: 50px;
      }
    }
  }
  ::v-deep(.el-form--inline .el-form-item) {
    width: 45%;
    span {
      line-height: 40px;
    }
  }
</style>